<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta name="renderer" content="webkit">
    <title>模版页</title>
    <link type="text/css" rel="stylesheet" href="/Content/LMS/css/bootstrap/bootstrap.css">
<link type="text/css" rel="stylesheet" href="/Content/LMS/css/fonts/icomoon/style.css">
<!--插件样式 begin-->
    <link type="text/css" rel="stylesheet" href="/Content/LMS/plugins/prism/prism.css">
<link type="text/css" rel="stylesheet" href="/Content/LMS/plugins/multiselect/multiselect.css">
<!--插件样式 end-->
    <link type="text/css" rel="stylesheet" href="/Content/LMS/css/theme/default/style.css">
<link type="text/css" rel="stylesheet" href="/Content/LMS/css/demo.css">
<!--此文件用于模板展示，开发不要引用-->
    <!--[if lt IE 9]>
    <script src="/Content/LMS/js/bootstrap/compatible/html5shiv.min.js"></script>
    <script src="/Content/LMS/js/bootstrap/compatible/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        .panel-default .panel-heading{ background-color: transparent; }
    </style>
</head>
<body>
    <div class="container" data-struct="header footer">
        <header class="header">
            <a href="#" class="logo"></a>
<div class="header-bar">
    <div class="align-left">
        <ul class="nav navbar-nav">
            <li>
                <a href="#">个人中心</a>
            </li>
            <li>
                <a href="#">个人中心</a>
            </li>
            <li class="dropdown arrow">
                <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">
                    Dropdown
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" aria-labelledby="drop1">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </li>
            <li class="dropdown arrow">
                <a id="drop2" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" aria-labelledby="drop2">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="align-right">
        您好，王大锤 &nbsp; | &nbsp; <a href="#" class="text-white">注销</a>
    </div>
</div>
        </header>
        <main class="wrapper">
            <aside class="aside"></aside>
            <article class="content">
                <div class="panel">
                    <h2>概览</h2>
                    <p>此框架基于Bootstrap，在使用之前请先熟读Bootstrap文档：<a href="http://v3.bootcss.com/" target="_blank">Bootstrap v3.3.5</a></p>
                </div>
                <div class="panel">
                    <h2>布局</h2>
                    <p>
                        Bootstrap的布局采用先进的栅格系统，能使网页在不同大小的屏幕上获得较好的使用体验，栅格系统将网页以行（row）和列（column）划分，
                        一行分为12格，并细分为大屏（col-lg-*），中屏（col-md-*），小屏（col-sm-*），超小屏（col-xs-*），具体原理和用法参见文档：
                        <a href="//v3.bootcss.com/css/#overview-container" target="_blank">栅格系统</a>
                    </p>
                    <p>
                        我们在布局中增加了布局配置，通过修改<code>.container</code>的<code>data-struct</code>属性，让页面呈现不同的布局框架。
                    </p>
                </div>
                <div class="panel">
                    <h2>排版</h2>
                    <p>
                        网页排版详见Bootstrap文档：<a href="//v3.bootcss.com/css/#type" target="_blank">排版</a>
                    </p>
                </div>
                <div class="panel">
                    <h2>文本</h2>
                    <p>
                        我们在Bootstrap提供的5中
                        <a href="//v3.bootcss.com/css/#helper-classes-colors" target="_blank">情景文本颜色</a>
                        基础上增加了主题文本颜色和灰度文本颜色。
                    </p>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <p>实例：</p>
                            <ul class="list-inline">
                                <li class="text-primary">情景文本颜色</li>
                                <li class="text-success">情景文本颜色</li>
                                <li class="text-info">情景文本颜色</li>
                                <li class="text-warning">情景文本颜色</li>
                                <li class="text-danger">情景文本颜色</li>
                            </ul>
                            <ul class="list-inline clear-margin-bottom">
                                <li class="text-theme">主题文本颜色</li>
                                <li class="text-gray">灰度文本颜色</li>
                                <li class="text-gray-light">灰度文本颜色</li>
                                <li class="text-gray-lighter">灰度文本颜色</li>
                                <li class="text-white" style="background-color:#333;">灰度文本颜色</li>
                            </ul>
                        </div>
                        <div class="panel-body">
                            <pre><code class="language-html">
                                <noscript>
                                    <span class="text-primary">情景文本颜色</span>
                                    <span class="text-success">情景文本颜色</span>
                                    <span class="text-info">情景文本颜色</span>
                                    <span class="text-warning">情景文本颜色</span>
                                    <span class="text-danger">情景文本颜色</span>

                                    <span class="text-theme">主题文本颜色</span>
                                    <span class="text-gray">灰度文本颜色</span>
                                    <span class="text-gray-light">灰度文本颜色</span>
                                    <span class="text-gray-lighter">灰度文本颜色</span>
                                    <span class="text-white">灰度文本颜色</span>
                                </noscript>
                            </code></pre>
                        </div>
                    </div>
                </div>
                <div class="panel">
                    <h2>链接</h2>
                    <p>
                        链接默认无下划线，<code>hover</code>状态有下划线，
                        如果不想要蓝色链接文字，可使用<code>情景文本颜色</code>或
                        <code>灰度文本颜色</code> 类改变其颜色。
                    </p>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <p>实例：</p>
                            <ul class="list-inline clear-margin-bottom">
                                <li><a href="#">Link</a></li>
                                <li><a href="#" class="text">Link</a></li>
                                <li><a href="#" class="text-gray">Link</a>          </li>
                                <li><a href="#" class="text-gray-light">Link</a>    </li>
                                <li><a href="#" class="text-gray-lighter">Link</a>  </li>
                            </ul>
                        </div>
                        <div class="panel-body">
                            <pre><code class="language-html">
                                <noscript>
                                    <a href="#">Link</a>
                                    <a href="#" class="text">Link</a>
                                    <a href="#" class="text-gray">Link</a>
                                    <a href="#" class="text-gray-light">Link</a>
                                    <a href="#" class="text-gray-lighter">Link</a>
                                </noscript>
                            </code></pre>
                        </div>
                    </div>
                </div>
                <div class="panel">
                    <h2>表格</h2>
                    <p>

                    </p>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <p>实例：</p>
                            <table class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Username</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <th scope="row">1</th>
                                    <td>Mark</td>
                                    <td>Otto</td>
                                    <td>@mdo</td>
                                </tr>
                                <tr>
                                    <th scope="row">2</th>
                                    <td>Jacob</td>
                                    <td>Thornton</td>
                                    <td>@fat</td>
                                </tr>
                                <tr>
                                    <th scope="row">3</th>
                                    <td>Larry</td>
                                    <td>the Bird</td>
                                    <td>@twitter</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="panel-body">
                            <pre><code class="language-html">
                                <noscript>
                                    <table class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>First Name</th>
                                                <th>Last Name</th>
                                                <th>Username</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <th scope="row">1</th>
                                                <td>Mark</td>
                                                <td>Otto</td>
                                                <td>@mdo</td>
                                            </tr>
                                            ...
                                        </tbody>
                                    </table>
                                </noscript>
                            </code></pre>
                        </div>
                    </div>
                </div>
                <div class="panel">
                    <h2>表单</h2>
                    <p>
                        表单控件Bootstrap里有的就不一一赘述了，请参阅Bootstrap文档：
                        <a href="//v3.bootcss.com/css/?#forms" target="_blank">表单</a>，
                        下面主要讲我们对于表单控件的扩展。<br>
                    </p>
                    <p>
                        <code>注：强烈建议使用表单提交数据，避免因js脚本问题导致表单无法提交，增强程序的健壮性。</code>
                    </p>
                </div>
                <div class="panel">
                    <h2 id="multiselect">多选下拉列表</h2>
                    <p>
                        多选下拉列表宽度默认是自适应的，会根据您选择项的多少自适应宽度，
                        您也可以根据情况为<code>.multiselect</code>设置固定宽度，让选择项超出指定宽度后换行。
                    </p>
                    <p>
                        绑定时通过传入<code>filter</code>方法可定义过滤器，每次选择都会触发过滤器，
                        通过返回<code>true</code>或<code>false</code>来决定可选择的选项，
                    </p>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <p>实例：</p>
                            <div id="myMultiSelect" class="btn-group multiselect">
                                <div class="selected-group clearfix" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                    <ul class="list-selected"></ul>
                                    <span class="caret"></span>
                                </div>
                                <ul class="dropdown-menu">
                                    <li><a href="javascript:;" data-value="1">Tag1</a></li>
                                    <li><a href="javascript:;" data-value="2">Tag2</a></li>
                                    <li><a href="javascript:;" data-value="3">Tag3</a></li>
                                    <li><a href="javascript:;" data-value="4">Tag4</a></li>
                                    <li><a href="javascript:;" data-value="5">Tag5</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="panel-body">
                            <pre><code class="language-html">
                                <noscript>
                                    <head>
                                        <!--引用插件样式-->
                                        <link href="path/to/multiselect.css" />
                                    </head>

                                    <div id="multiselect1" class="btn-group multiselect">
                                        <div class="selected-group clearfix" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                            <ul class="list-selected"></ul>
                                            <span class="caret"></span>
                                        </div>
                                        <ul class="dropdown-menu">
                                            <li><a href="javascript:;" data-value="1">Tag1</a></li>
                                            <li><a href="javascript:;" data-value="2">Tag2</a></li>
                                            <li><a href="javascript:;" data-value="3">Tag3</a></li>
                                            <li><a href="javascript:;" data-value="4">Tag4</a></li>
                                            <li><a href="javascript:;" data-value="5">Tag5</a></li>
                                        </ul>
                                    </div>

                                    <!-- 引用插件脚本 -->
                                    <script src="path/to/multiselect.js"></script>
                                    <!-- 绑定插件 -->
                                    <script type="text/javascript">
                                        $(function(){
                                            $("#multiselect1").multiselect({
                                                filter: function(value, text, selected){
                                                    if (...){
                                                        //过滤条件成立
                                                        return false;
                                                    }
                                                }
                                            });
                                        })
                                    </script>
                                </noscript>
                            </code></pre>
                        </div>
                    </div>
                </div>
                <div class="panel">
                    <h2>按钮</h2>
                    <p>
                        Bootstrap的按钮已经可以满足大部分需求了，我们在此基础上加了一个主题按钮。
                    </p>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <p>实例：</p>
                            <ul class="list-inline clear-margin-bottom">
                                <li><button type="button" class="btn btn-default">Button</button></li>
                                <li><button type="button" class="btn btn-primary">Button</button></li>
                                <li><button type="button" class="btn btn-success">Button</button></li>
                                <li><button type="button" class="btn btn-info">Button</button></li>
                                <li><button type="button" class="btn btn-warning">Button</button></li>
                                <li><button type="button" class="btn btn-danger">Button</button></li>
                                <li><button type="button" class="btn btn-theme  ">Button</button></li>
                            </ul>
                        </div>
                        <div class="panel-body">
                            <pre><code class="language-html">
                                <noscript>
                                    <button type="button" class="btn btn-default">Button</button>
                                    <button type="button" class="btn btn-primary">Button</button>
                                    <button type="button" class="btn btn-success">Button</button>
                                    <button type="button" class="btn btn-info">Button</button>
                                    <button type="button" class="btn btn-warning">Button</button>
                                    <button type="button" class="btn btn-danger">Button</button>
                                    <button type="button" class="btn btn-theme">Button</button>
                                </noscript>
                            </code></pre>
                        </div>
                    </div>
                </div>
                <div class="panel">
                    <h2>面包屑导航</h2>
                    <p>
                        对Bootstrap的面包屑导航做了一些修改，分隔符<code>/</code>改为<code>&gt;</code>。
                    </p>
                    <p>
                        您可以在有序列表的第一个<code>&lt;li&gt;</code>上加一个<code>.description</code>类来作为说明文字。
                    </p>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div>实例：</div>
                            <ol class="breadcrumb clear-margin-bottom">
                                <li class="description">您的位置：</li>
                                <li><a href="#">Home</a></li>
                                <li><a href="#">Library</a></li>
                                <li class="active">Data</li>
                            </ol>
                        </div>
                        <div class="panel-body">
                            <pre><code class="language-html">
                                <noscript>
                                    <ol class="breadcrumb">
                                        <li class="description">您的位置：</li>
                                        <li><a href="#">Home</a></li>
                                        <li><a href="#">Library</a></li>
                                        <li class="active">Data</li>
                                    </ol>
                                </noscript>
                            </code></pre>
                        </div>
                    </div>
                </div>
                <div class="panel">
                    <h2>模态框</h2>
                    <p>Bootstrap的模态框并没有上下居中，我们对其进行了扩展，给<code>.modal</code>加上<code>.middle</code>类，可以使其上下居中。</p>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <p>实例：</p>
                            <div>
                                <button type="button" class="btn btn-theme" data-toggle="modal" data-target="#myModal1">Open Modal</button>
                            </div>
                        </div>
                        <div class="panel-body">
                            <pre><code class="language-html">
                                <noscript>
                                    <div id="myModal" class="modal middle fade">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                    <h4 class="modal-title">Modal title</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <p>One fine body...</p>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-primary">Save</button>
                                                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                                </div>
                                            </div><!-- /.modal-content -->
                                        </div><!-- /.modal-dialog -->
                                    </div><!-- /.modal -->
                                </noscript>
                            </code></pre>
                        </div>
                    </div>
                </div>
                <div class="panel">
                    <h2>下拉列表（React）</h2>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <p>实例：</p>
                            <div id="DropdownSelectDemo">
                                <!--<div class="btn-group" role="select">
                                    <button type="button" class="btn btn-default" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
                                    <button type="button" class="btn btn-default dropdown-toggle">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a href="javascript:;" data-value="1">Action</a></li>
                                        <li><a href="javascript:;" data-value="2">Another action</a></li>
                                        <li><a href="javascript:;" data-value="3">Something else here</a></li>
                                        <li role="separator" class="divider"></li>
                                        <li><a href="javascript:;">Separated link</a></li>
                                    </ul>
                                </div>-->
                            </div>
                        </div>
                        <div class="panel-body">
                            <pre>
                                <code class="language-html"><noscript>
                                    <div id="DropdownSelect"></div>
                                </noscript></code>
                            </pre>
                            <pre>
                                <code class="language-javascript"><noscript>
                                    ReactDOM.render(
                                        React.createElement(ReactWebComponent.Dropdown, {
                                            id: "lstSelect",
                                            get: {
                                                url: "/Content/LMS/component/react/test/dropdown.txt"
                                            },
                                            defaultText: "Please select",
                                            onItemClick: function () {
                                                console.log($("#lstSelect").val());
                                            }
                                        }),
                                        document.getElementById("DropdownSelect")
                                    );
                                </noscript></code>
                            </pre>
                        </div>
                    </div>
                </div>
            </article>
        </main>
        <footer class="footer">
            <div>沪ICP备100000000号-1</div>
        </footer>
    </div>
    <div id="myModal1" class="modal middle fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Modal title</h4>
                </div>
                <div class="modal-body">
                    <p>One fine body...</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">Save</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <script type="text/javascript" charset="utf-8" src="/Content/LMS/js/jquery/jquery-1.11.2.js"></script>
<script type="text/javascript" charset="utf-8" src="/Content/LMS/js/bootstrap/bootstrap.js"></script>
<script type="text/javascript" charset="utf-8" src="/Content/LMS/js/react/react.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/Content/LMS/js/react/react-dom.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/Content/LMS/component/react/dropdown.js"></script>
<!--插件脚本 begin-->
    <script type="text/javascript" charset="utf-8" src="/Content/LMS/plugins/multiselect/multiselect.js"></script>
<!--插件脚本 end-->
    <script type="text/javascript" charset="utf-8" src="/Content/LMS/js/global.js"></script>
<script type="text/javascript" charset="utf-8" src="/Content/LMS/plugins/prism/prism.extend.js"></script>
<!--此文件用于模板展示，开发不要引用-->
    <script type="text/javascript">
        $(function () {
            ReactDOM.render(
                React.createElement(ReactWebComponent.Dropdown, {
                    id: "lstSelect",
                    get: {
                        url: "/Content/LMS/component/react/test/dropdown.txt"
                    },
                    defaultText: "Please select",
                    onItemClick: function () {
                        console.log({ text: $(this).text(), value: $("#lstSelect").val() });
                    }
                }),
                document.getElementById("DropdownSelectDemo")
            );
            $("#myMultiSelect").multiselect();
        })
    </script>
    <script type="text/javascript" charset="utf-8" src="/Content/LMS/plugins/prism/prism.js"></script>
</body>
</html>